<template>
  <div>
    <el-dialog :title="dialogTitle" :visible.sync="isShow" @close="_closeDialog" width="680px">
      <div>
        <div v-if="assessForm.goodsInfo">
          <div class="assess-tips">*确保推手收到快递的时候再邀请推手评价！</div>
          <div>
            <span class="assess-param-name">商品名称：</span>
            <el-select v-model="assessForm.product_id" placeholder="请选择邀评商品" size="small" @change="designatedGoods">
              <el-option v-for="(item,index) in assessForm.goodsInfo" :key="index" :label="item.goods_title"
                         :value="item.product_id"></el-option>
            </el-select>
          </div>
        </div>

        <div v-if="assessOption.designatedGoodsImg">
          <div class="assess-param-div" style="display: flex">
            <div class="assess-param-name">{{ assessOption.label }}：</div>
            <div class="assess-param-div">
              <img :src="assessOption.designatedGoodsImg" alt="" style="display: block; width: 150px">
            </div>
          </div>
        </div>

        <div v-if="createType == 1" class="assess-param-div" v-show="assessOption.label != '已邀请'">
          <div>
            <span class="assess-param-name">填写评价类型：</span>
            <el-select v-model="assessForm.selfType" placeholder="请选择评价类型" size="small">
              <el-option v-for="(item,index) in assessTaskType" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </div>
        </div>

        <div v-if="assessForm.selfType ==2" v-show="assessOption.label != '已邀请'">
          <div class="assess-param-div">
            <div class="assess-param-name">填写评语：</div>
            <el-input class="assess-textarea" type="textarea" @blur="filterSpecialCharacters(assessForm)" rows="5"
                      v-model="assessForm.assessContent" placeholder="请输入评语"></el-input>
          </div>
          <div class="upload-img">
            <div class="assess-param-name">上传图片：</div>
            <div class="img-box">
              <el-upload
                  ref='upload'
                  class="avatar-uploader"
                  :action="BASE_API_URL+'baseapi/wechart/uploadMerchantPushImg'"
                  :data="uploadData"
                  list-type="picture-card"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :on-remove="handleRemove"
                  :limit="5"
                  multiple
                  :on-exceed="handleExceed">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
          <div class="upload-img">
            <div class="assess-param-name">上传视频：</div>
            <div class="img-box video-box">
              <!-- action必选参数, 上传的地址 -->
              <el-upload
                  class="avatar-uploader el-upload--text"
                  :action="BASE_API_URL+'baseapi/wechart/uploadMerchantPushImg'"
                  :show-file-list="false"
                  :data="uploadVideo"
                  :on-success="handleVideoSuccess"
                  :before-upload="beforeUploadVideo"
                  :on-progress="uploadVideoProcess">
                <video v-if="assessForm.videoUrl !='' && videoFlag == false" :src="assessForm.videoUrl" class="avatar"
                       controls="controls">您的浏览器不支持视频播放
                </video>
                <i v-else-if="assessForm.videoUrl =='' && videoFlag == false"
                   class="el-icon-plus avatar-uploader-icon"></i>
                <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent"
                             style="margin-top:30px;"></el-progress>
              </el-upload>
            </div>
          </div>
        </div>
        <div class="assess-dialog-footer" v-show="assessOption.label != '已邀请'">
          <el-button class="assess-dialog-cancel-btn" @click="_closeDialog" size="small">取 消</el-button>
          <el-button class="assess-dialog-confirm-btn" :loading="submitLoading" @click="_confrimAssess" size="small">确
            定
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    apiDelImg,
    apiCreateAssessTask,
    apiCreateAssessMultiTasking
  } from '../request/api.js'
  export default {
    props: {
      assessForm:{
       default: {}
      },
      createType: {
       default: ''
      },
    },
    data () {
      return {
        isShow: true,
        uploadData: {
          area: 'assess'
        },
        uploadVideo: {
          area: 'video'
        },
        dialogTitle: '',
        submitLoading: false,
        assessTaskType:[{
            value: 1,
            label: "自评类型"
          },{
            value: 2,
            label: "商家要求"
        }],
        imgArr: [],
        videoFlag:false,
        videoUploadPercent: 0,
        userToken: window.localStorage.getItem('token'),
        assessOption: {
          designatedGoodsImg: "",
          assessType: {
            1: "邀请评价",
            2: "邀请追评",
            3: "已邀请",
          }, //1：无评价2：含有一条评价（可添加追评）3：含有追评了不许再创建评价任务
          label: ""
        }
      }
    },
    created () {
       this.dialogTitle = this.createType == 1 ? '邀请评价' : '追加评价'

    },
    methods: {
      //图片上传
      handleAvatarSuccess(res, file) {
         this.imgArr.push(res.msg)
          this.$message.success('上传成功');
        },
        handleExceed(files, fileList){
          if (fileList.length == 3) {
             this.$message.error('最多只上传3张图片');
             return
          }

        },
        handleRemove(file, fileList) {
          var curUrl = ''
          for (var i in this.imgArr) {
            if (this.imgArr[i] == file.response.msg) {
              curUrl = this.imgArr[i]
              this.imgArr.splice(i,1);
            }
          }
          this.$isClick(true);
          apiDelImg({
            imageUrl: curUrl,
            type: 'proof'
          }).then(res =>{
            this.$isClick(false);
             if (res.code == 1){
               this.$message.success('删除成功');
             } else {
               this.$message.error(res.msg);
             }
          }).catch(res => {
            this.$isClick(false);
              this.$message.error(res.msg)
          })
        },
        beforeAvatarUpload(file) {
          const isLt2M = file.size / 1024 / 1024 < 10;
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 10MB!');
          }
          return isLt2M;
        },
        beforeUploadVideo(file) {
            const isLt10M = file.size / 1024 / 1024  < 10;
            if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
                this.$message.error('请上传正确的视频格式');
                return false;
            }
            if (!isLt10M) {
                this.$message.error('上传视频大小不能超过10MB哦!');
                return false;
            }
        },
        uploadVideoProcess(event, file, fileList){
            this.videoFlag = true;
            this.videoUploadPercent = parseInt(file.percentage);
        },
        handleVideoSuccess(res, file) {                               //获取上传图片地址
            this.videoFlag = false;
            this.videoUploadPercent = 0;
            if(res.code == 1){
                this.assessForm.videoUrl = res.msg;
            }else{
                this.$message.error('视频上传失败，请重新上传！');
            }
        },
        filterSpecialCharacters(e){
          // const assessContent = assessContent(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]|[\uD800-\uDBFF]|[\uDC00-\uDFFF]|[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g,'')
          // const newAssessContent = assessContent.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\！\!\:\;\：\；\，\,\.\。\【】\{}\()]/g, "")
          // this.$set(e,'assessContent',newAssessContent)
        },
        _closeDialog() {
          this.$emit('closeDialog')
        },
        _confrimAssess(){
          // 一拖N
          if (this.assessForm.goodsInfo && this.assessForm.goodsInfo != "undefined") {
            if (this.assessForm.product_id == "") {
              this.$message.error('请选择商品名称');
              return
            }
            this.submitLoading = true
            apiCreateAssessMultiTasking(this.assessForm).then(res => {
              this.submitLoading = false
              if (res.code == 1) {
                this.$emit('confrimAssess')
              } else {
                this.$message.error(res.msg)
              }
            }).catch(err => {
              this.submitLoading = false
              this.$message.error(err.msg)
            })
            return;
          }

          // 非一拖N
          if (this.assessForm.selfType == 2) {
            if (this.assessForm.assessContent == '') {
              this.$message.error('请填写评语');
              return
            }
            this.assessForm.imgUrls = this.imgArr.join(',')
          }
          this.submitLoading = true
          apiCreateAssessTask(this.assessForm).then(res =>{
            this.submitLoading = false
             if (res.code == 1){
               this.$emit('confrimAssess')
             } else {
               this.$message.error(res.msg);
             }
          }).catch(res => {
            this.submitLoading = false
              this.$message.error(res.msg)
          })
        }
    }
  }
</script>

<style lang="less">
  .el-dialog__body {
    padding: 10px 20px 30px 20px!important;
  }
  .assess-tips {
    color: red;
    margin-bottom: 16px;
  }

  .assess-param-name {
    display: inline-block;
    width: 100px;
    text-align: right;
  }
  .upload-img {
    margin-top: 10px;
  }
  .assess-param-div {
    margin-top: 20px;
    .assess-textarea {
      width: 71% !important;
      vertical-align: text-top !important;
    }
  }
  .img-box {
    display: inline-block;
    margin-right: 10px;
    vertical-align: text-top;
    .el-upload--picture-card {
      width: 120px;
      height: 150px;
    }
    .el-upload-list--picture-card .el-upload-list__item {
      width: 120px;
      height: 150px;
    }
    .el-upload--picture-card i {
      vertical-align: top;
    }

    /deep/ .el-upload-list--picture-card .el-progress {
          height: 80px;
          width: 80px;
     }
    /deep/ .el-progress-circle {
      height: 80px !important;
      width: 80px !important;
      svg {
            height: 80px;
            width: 80px;
      }
    }
  }
   .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 150px;
      line-height: 150px;
      text-align: center;
    }
    .avatar {
      width: 120px;
      height: 150px;
      display: block;
    }
    .video-box {
      /deep/ .el-upload-list--picture-card .el-progress {
            height: 120px;
            width: 120px;
       }
      /deep/ .el-progress-circle {
        height: 120px !important;
        width: 120px !important;
        svg {
              height: 120px;
              width: 120px;
        }
      }
    }
    .assess-dialog-footer {
      text-align: right;
      margin-top: 25px;
      .assess-dialog-cancel-btn {
        background: #fff !important;
        color: #333333 !important;
        height: 35px;
		    padding: 0 20px;
        margin-right: 30px !important;
        border: 1px solid #aba7a7 !important;
      }
	  .assess-dialog-confirm-btn {
		  background-color: @themeColor;
		  color: #fff!important;
		  height: 35px;
		  padding: 0 20px;
	   }
    }
</style>
